import React from 'react'
import {Button, Card, Icon, Modal, Table} from 'antd'
import Styles from '../Index.less'
import {fetchPost} from '../../../../../utils/request'
import AddRecord from './AddRecord'

class ThirdContacts extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tradeNo: props.tradeNo,
      id: props.id,
      item: props.item,
    }
  }

  componentWillReceiveProps(props) {
    if (this.state.id != props.id) {
      this.setState({
        tradeNo: props.tradeNo,
        id: props.id,
        item: props.item,
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount() {
    this.getData()
  }

  componentWillUnmount() {
    clearTimeout(this.state.timer)
  }

  getData() {
    if (this.state.tradeNo != null) {
      fetchPost(`/collection/v2/third/contacts/list`, {
        tradeNo: this.state.tradeNo
      }).then(json => {
        if (json.data != null && json.code === 0) {
          this.setState({
            data: json.data.contacts,
          })
        } else {
          this.setState({
            data: [],
          })
        }
      })
    } else {
      this.setState({
        data: [],
      })
    }
  }

  showModal(record) {
    this.props.changeModal();
  }

  handleOk = e => {
    this.getData()
    this.setState({
      visible: false,
    })
  }

  handleCancel = e => {
    this.setState({
      visible: false,
    })
  }

  render() {
    let columns = [
      {
        title: 'Mobile',
        key: 'VALUE',
        dataIndex: 'VALUE'
      },
      {
        title: 'Reported date',
        key: 'REPORTED-DATE',
        dataIndex: 'REPORTED-DATE'
      },
      {
        title: 'Operate',
        render: (record) => (
          <Button type='primary' size='small' onClick={() => this.showModal()}>Operate</Button>
        )
      }
    ]

    return (
      <div className={Styles.detailModule}>
        <Card title='Highmark PHONE-NUMBER Info'
              bodyStyle={{padding: 0, minHeight: 100, overflowY: 'scroll'}} noHovering={true}>
          <Table
            size='small'
            pagination={false}
            bordered
            dataSource={this.state.data}
            columns={columns}
            key='name'
          />
        </Card>
        <Modal
          title="Record"
          visible={this.state.visible}
          onCancel={this.handleCancel}
          footer={null}
        >
          <AddRecord onOk={this.handleOk} info={this.state.addRecordInfo}/>
        </Modal>
      </div>
    )
  }
}

export default ThirdContacts
